<template>
    <van-nav-bar title="填写订单" left-text="返回" left-arrow @click-left="onClickLeft" />
        <div class="content" >
            <div class="box" @click="toAddress">
                <span>张三</span><span style="margin-left:10px">130000000000</span>
                <span class="box1">默认</span>
            </div>
            <div class="box2" @click="toAddress">
                浙江省杭州市西湖区文三路<br> 138 号东方通信大厦 7 楼 501 室
            </div>
            <van-icon name="arrow" class="btn"  @click="toAddress"/>

        </div>
        <div class="container">
            <ul>
                <li v-for="item in lists" :key="item.id" style="margin-bottom:10px">
                    <p class="tit">{{item.name.slice(0,3)}}</p>
                    <p><img :src= item.url alt="" style="width:100px"></p>
                    <p>商品名称:{{item.name}}</p>
                    <p>商品价格:￥{{item.price}}<span class="num">商品数量:{{item.num}}</span></p>
                    <p>———————————————————————</p>
                </li>
            </ul>
        </div>
        <div>
            <button class="btn2" @click="payment">确认付款</button>
            <span class="zong">￥{{total.toFixed(2)}}</span>
        </div>
    </template>
    
    
<script setup lang="ts">
// 接收购物车
    import { useCart } from '@/hooks/cart'
    import {ref} from 'vue'
    import { useRouter } from 'vue-router'
    import { Toast } from 'vant'
    // 解析购物车newList
    const {onSubmit,cartList} = useCart()
    const router = useRouter()
    const total = ref(0)

    const list = onSubmit()
    
    console.log(list.value);
    const lists = list.value
    const lister = cartList.value
    
    const onClickLeft = ()=>{
        router.push('/cart')
    }
    const toAddress = ()=>{
        router.push('/address')
    }

    for(var i=0;i<lists.length;i++){
        total.value =  Number(lists[i].num * lists[i].price) + total.value
    }
    const payment = ()=>{
        lister.every((item,index)=>{
            if(item.state == true){
                lister.splice(index,1)
            }
        })
        // lister.splice(0,lists.length)
        lists.splice(0,lists.length);
        Toast.success('付款成功')
    }
    // export const payment = ()=>{
    //     lists.splice(0,lists.length);
    //     Toast.success('付款成功')
    // }
    // return{
    //     payment,
    // }
    
</script>
    
    <style lang="scss" scoped>

    .content{
        display:flex;
        flex-wrap: wrap;
        width: 95%;
        margin-left: 10px;
        margin-bottom: 10px;
        text-align: center;
        background-color:rgb(248,249,249);
        border-radius:5%;
        .box{
            width: 90%;
            margin-left: 15px;
            height: 40px;
            line-height: 50px;
            display:flex;
            span{
                font-size: 18px;
            }
            .box1{
                background-color: red;
                font-size: 1px;
                display: block;
                margin-top: 10px;
                margin-left: 10px;
                height: 30px;
                width: 40px;
                border-radius:25%;
                text-align: center;
                line-height: 30px;
                color: white;
            }
        }
        .box2{
            text-align: left;
            margin-left: 15px;
            width: 300px;
            height: 37px;
            font-size: 14px;
        }
        button{
            background-color: silver;
            border: none;
        }
        .btn{
            width: 10px;
        }
    }
    .container{
        padding: 10px;
        width: 90%;
        margin-left: 10px;
        background-color:rgb(248,249,249);
        border-radius: 7%;
    }
    .chckbox{
        margin-top:23px;
    }
    .btn2{
        border: none;
        background-color: red;
        color: white;
        width: 100px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        border-radius: 7%;
        margin-top:10px;
        margin-left: 10px;
        margin-right: 170px;
        font-size: 16px;
    }
    .num{
        margin-left: 90px;
    }
    .zong{
        font-size: 25px;
        color: red;
    }
    .tit{
        font-size: 20px;
    }
    </style>